<template>
  <a-card size="small" :bordered="false" :hoverable="true">
    <a-form class="smart-query-form" layout="inline">
      <a-form-item label="道路编号">
        <a-input v-model:value="queryForm.roadCode" allowClear placeholder="请输入道路编号" style="width: 200px" />
      </a-form-item>
      <a-form-item label="摄像机编号">
        <a-input v-model:value="queryForm.cameraCode" allowClear placeholder="请输入摄像机编号" style="width: 200px" />
      </a-form-item>
      <a-form-item label="车道编码">
        <a-input v-model:value="queryForm.laneCode" allowClear placeholder="请输入车道编码" style="width: 160px" />
      </a-form-item>
      <a-form-item label="统计时间">
        <a-range-picker
          v-model:value="statRange"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          :presets="defaultChooseTimeRange"
          style="width: 320px"
          @change="handleRangeChange"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="onSearch" :loading="tableLoading">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-button @click="resetQuery" :disabled="tableLoading">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-form>

    <a-row justify="end">
      <TableOperator
        class="smart-margin-bottom5"
        v-model="columns"
        :tableId="TABLE_ID_CONST.BUSINESS.TRAFFIC.AIBI_CAMERA"
        :refresh="fetchTable"
      />
    </a-row>

    <a-table
      size="small"
      bordered
      class="smart-margin-top10"
      :loading="tableLoading"
      :dataSource="tableData"
      :columns="columns"
      :pagination="false"
      rowKey="id"
      scroll="{ x: 1200 }"
    />

    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        v-model:current="queryForm.pageNum"
        v-model:pageSize="queryForm.pageSize"
        :total="total"
        :disabled="tableLoading"
        @change="fetchTable"
        @showSizeChange="fetchTable"
        :show-total="(t) => `共${t}条`"
      />
    </div>
  </a-card>
</template>

<script setup>
  import { ReloadOutlined, SearchOutlined } from '@ant-design/icons-vue';
  import dayjs from 'dayjs';
  import { onMounted, reactive, ref } from 'vue';
  import { aibiCameraApi } from '/@/api/business/traffic/aibi-camera-api';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import { defaultTimeRanges } from '/@/lib/default-time-ranges';
  import { smartSentry } from '/@/lib/smart-sentry';
  import TableOperator from '/@/components/support/table-operator/index.vue';

  const tableLoading = ref(false);
  const total = ref(0);
  const tableData = ref([]);

  const defaultChooseTimeRange = defaultTimeRanges;
  const statRange = ref([]);

  const DEFAULT_ROAD_CODE = '1201100';

  const queryForm = reactive({
    pageNum: 1,
    pageSize: 10,
    roadCode: DEFAULT_ROAD_CODE,
    cameraCode: undefined,
    laneCode: undefined,
    startTime: undefined,
    endTime: undefined,
  });

  const columns = ref([
    { title: '道路编号', dataIndex: 'roadCode', width: 140 },
    { title: '摄像机编号', dataIndex: 'cameraCode', width: 160 },
    { title: '车道编码', dataIndex: 'laneCode', width: 100 },
    { title: '车道顺序', dataIndex: 'laneOrder', width: 100 },
    { title: '车道类型', dataIndex: 'laneType', width: 120 },
    { title: '排队长度', dataIndex: 'queueLength', width: 120 },
    { title: '车辆总数', dataIndex: 'vehicleCount', width: 120 },
    {
      title: '采集时间',
      dataIndex: 'sampleTime',
      width: 180,
      customRender: ({ text }) => (text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'),
    },
    {
      title: '统计开始时间',
      dataIndex: 'startTime',
      width: 180,
      customRender: ({ text }) => (text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'),
    },
    {
      title: '统计结束时间',
      dataIndex: 'endTime',
      width: 180,
      customRender: ({ text }) => (text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'),
    },
    { title: '排队原始数据', dataIndex: 'rawData', ellipsis: true },
  ]);

  function handleRangeChange(_, dateStrings) {
    queryForm.startTime = dateStrings?.[0];
    queryForm.endTime = dateStrings?.[1];
  }

  function resetQuery() {
    statRange.value = [];
    Object.assign(queryForm, {
      pageNum: 1,
      pageSize: queryForm.pageSize,
      roadCode: DEFAULT_ROAD_CODE,
      cameraCode: undefined,
      laneCode: undefined,
      startTime: undefined,
      endTime: undefined,
    });
    fetchTable();
  }

  function onSearch() {
    queryForm.pageNum = 1;
    fetchTable();
  }

  async function fetchTable() {
    try {
      tableLoading.value = true;
      const response = await aibiCameraApi.queryCarQueue({ ...queryForm });
      tableData.value = response?.data?.list || [];
      total.value = response?.data?.total || 0;
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      tableLoading.value = false;
    }
  }

  onMounted(fetchTable);
</script>

